<?php
include 'logic_layer.php';


if (!isset($_SESSION)) {
    session_start();
}

//make sure the session starts from the index page
//and that the session step matched current page
if (!isset($_SESSION["step"]) || $_SESSION["step"] != "tutorial_video") {
    header('Location: index.php');
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="assets/js/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <!-- Main -->
        <link href="main.css" rel="stylesheet" media="screen">
    </head>

    <body>
        <!-- Part 0: Steps -->
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="steps">
                    <p class="steps-done">Welcome &#10140; Outline &#10140; Personality Test &#10140; </p>
                    <p class="step-current">IFTTT Tutorial</p>
                    <p class="steps-pending"> &#10140; Making an Recipe &#10140; Questionnaire</p>
                </div>
            </div>
        </div>

        <div class="tutorial-video-container">
            <div id="ytapiplayer">
                You need Flash player 8+ and JavaScript enabled to view this video.
            </div>
        </div>

        <form action='index.php' method='post' name='frm'>
            <input type='hidden' value='create' name="step" />
        </form>


        <!-- Le javascript
        ================================================== -->
        <script src="assets/js/jquery/jquery-2.0.3.min.js"></script>
        <script src="assets/js/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/bootbox/bootbox.min.js"></script>
        <script type="text/javascript" src="assets/js/swfobject/swfobject.js"></script>   

        <script>

            var params = {allowScriptAccess: "always", wmode: "opaque"};
            var atts = {id: "myytplayer"};
            swfobject.embedSWF("http://www.youtube.com/v/FWL8QjcOc9g?enablejsapi=1&playerapiid=ytplayer&version=3&autohide=1&autoplay=1&controls=1&rel=0&showinfo=0&theme=light",
                    "ytapiplayer", "100%", "100%", "8", null, null, params, atts);

            function onYouTubePlayerReady(playerId) {
                ytplayer = document.getElementById("myytplayer");
                ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
            }

            function onytplayerStateChange(newState) {
                //started
                if (newState === -1) {
                    ytplayer.pauseVideo()
                    bootbox.alert("You are about to watch a short tutorial video.\nTo continue with the experiment, you need to watch the tutorial to the end. (if you do not need to watch the tutorial, simply fast-forward it to the end.)", function() {
                        ytplayer.playVideo()
                    });
                }
                //finished
                else if (newState === 0) {
                    bootbox.dialog({
                        message: "Do you want to watch the tutorial again?",
                        closeButton: false,
                        buttons: {
                            success: {
                                label: "No, continue with the experiment",
                                className: "btn-success",
                                callback: function() {
                                    // go to the next step
                                    document.frm.submit();
                                }
                            },
                            main: {
                                label: "Yes, play again",
                                className: "btn-primary",
                                callback: function() {
                                    ytplayer.playVideo()
                                }
                            }
                        }
                    });

                }
                //moved        
                else if (newState === 2) {

                }
            }
        </script>
    </body>
</html>
